<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'按销售加载调拨商品',liner:false}"></header-top>
		<view class="huisetext mainpadding">类别</view>
		<!-- 商品类别 -->
		<view class="ffffff mainpadding flexbetween">
			<view class="strongtext">商品类别</view>
			<view class="righticon"></view>
		</view>
		<view class="huisetext mainpadding">时间</view>
		<view class="mainpadding2 ffffff">
			<view class="flexleft">
				<view class="flexcenter bili" v-for="(item,index) in list" :key="item.id" @click="change(index)">
					<view :class= "index == current?'select margin_box margin_top':'noselect margin_box margin_top'">
						<text class="shenptext">{{item.name}}</text>
						<view class="selectimage"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="yesbtn">
			确认
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:1,
						name:'今天'
					},{
						id:2,
						name:'昨天'
					},{
						id:3,
						name:'近三天'
					},{
						id:4,
						name:'上次'
					},
				],
				current:-1,
			}
		},
		methods: {
			change(index){
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bili {
		width: 33.33%;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	/* 未选中状态 */
	.noselect {
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		width: 184rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 选中状态 */
	.select {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
		width: 184rpx;
		height: 64rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #0BBDCB;
	}

	.shenptext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.selectimage {
		width: 28rpx;
		height: 24rpx;
		right: -2%;
	}

	.flexleft {
		flex-wrap: wrap;
	}
</style>
